<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <div>
      <t-date-time
        dateType="datetime"
        label="日期时间"
        labelPosition="top"
        default-year-month="2014/01"
        placeholder="placeholder"
        v-model="date1"
        displayFormatWithDateTime="YYYY年MM月DD日 HH时mm分"
        maxWidth="10px"

      />
    </div>
    <div>
      <t-date-time
        labelPosition="left"
        label="日期"
        defaultYearMonth="2024/01"
        dateType="date"
        v-model="date2"
        displayFormatWithDate="YYYY年MM月DD日"
        @update:model-value="handleChange"
        todayBtn
      />
    </div>
    <div>
      <t-date-time
        format24h
        with-seconds
        label="时间"
        dateType="time"
        v-model="date3"
        labelPosition="left"
        CancelButtonText="取消"
        ConfirmButtonText="确定"
      />
    </div>
    <div>
      <t-date-time
        label="时间"
        dateType="time"
        disable
        labelPosition="left"
        v-model="date3"
      />
      <t-input type="datetime-local"></t-input>
    </div>

    datetime:<div> {{ date1 }}</div> date:<div> {{ date2 }}</div> time:<div>
      {{ date3 }}</div
    >
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';

export default {
  setup() {
    let date1 = ref('2019-02-01 13:27:00');
    let date2 = ref('');
    let date3 = ref('13:27:00');
    onMounted(() => {
      setTimeout(() => {
        // date2.value = '2019-02-01';
        date2.value = new Date();
      }, 200);
    });
    return {
      date1,
      date2,
      date3,
      handleChange(value, reason, details) {
        console.log(value, reason, details,'change');

      }
    };
  },
};
</script>
